import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';


class TextFieldPage extends StatefulWidget {

  @override
  _TextFieldPageState createState() => _TextFieldPageState();
}

class _TextFieldPageState extends State<TextFieldPage> {
  /// 用于文本输入框
  TextEditingController controller = new TextEditingController();

  /// 用来控制 TextFild 焦点的获取与关闭
  FocusNode focusNode = new FocusNode();

  String _textFieldValue = "";

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    /// 初始化
    controller.text = "0000";
    /// 添加监听 当textFeild 中内容发生变化时，回调
    controller.addListener(() {
      print("controller 监听");
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("TextField"),
        actions: <Widget>[
          FlatButton(
              onPressed: (){
                /// 获取文本的内容
                String inputText = controller.text;
                print("点击了保存 $inputText");
              },
              child: Text("保存",style: TextStyle(color: Colors.white),)
          )
        ],
      ),
      body: ListView(
        /// SizedBox 用来限制一个固定 width height 的空间
      children: [
        SizedBox(
          width: 350,
          height: 100,
          child: Container(
            color:Colors.white24,
            padding: EdgeInsets.all(10),
            /// Alignment 用来对齐Widget
            ///alignment: Alignment(0,0),
            child: TextField(
              /// 输入框 控制器
              controller: controller,
              decoration: InputDecoration(
                /// 设置输入文本框的提示文字
                hintText: "输入用户名",
                hintStyle: TextStyle(color: Colors.grey),
                /// 输入框内提示，输入框没有获取焦点时显示
                labelText: "用户名",
                labelStyle: TextStyle(color:Colors.blue),
                /// 显示在输入框下面的文字
                 helperText: "这是帮忙提示语",
                 helperStyle: TextStyle(color: Colors.green),

                /// 显示在输入下面的文字
                  /// errorText: "这是错误文本提示",
                  ///errorStyle: TextStyle(color:Colors.red),
                /// 输入框获取焦点时才会显示出来 输入文本的前面
                prefixText: "prfix",
                prefixStyle: TextStyle(color:Colors.deepPurple),
                /// 输入框获取焦点时才会显示出来 输入文本的后面
                suffixText: "suf",
                suffixStyle: TextStyle(color: Colors.black),
                /// 文字计数
                ///counterText: "count",
                ///counterStyle: TextStyle(color: Colors.deepPurple[100]),
                prefixIcon: Icon(Icons.phone),
                suffixIcon: Icon(Icons.close),


                /// 设置边框
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.all(Radius.circular(10)),
                  /// 用来配置边框的样式
                  borderSide:BorderSide(
                    /// 设置边框的颜色
                   color: Colors.red,
                   /// 设置边框的粗细
                    width: 2.0,
                  )
                ),
                /// 用来配置输入框获取焦点时颜色
                focusedBorder: OutlineInputBorder(
                  /// 设置边框四个角的弧度
                  borderRadius: BorderRadius.all(Radius.circular(20)),
                    /// 用来配置边框的样式
                    borderSide:BorderSide(
                      /// 设置边框的颜色
                      color: Colors.green,
                      /// 设置边框的粗细
                      width: 2.0,
                    )
                )
                
              ),
              /// 允许输入的文本样式规则
              inputFormatters: <TextInputFormatter>[
                /// 只允许输入数字
                //WhitelistingTextInputFormatter.digitsOnly,
               // WhitelistingTextInputFormatter(RegExp(r'\d+')),
              ],
              /// 设置输入键盘的类型
              keyboardType: TextInputType.phone,
              
              /// 设置输入框是否可编辑
              enabled: true,
              /// 限制输入框内文本长度
              maxLength: 10,
              /// 限制输入框输入文本的行数
              maxLines: 1,
              /// 输入框内输入文本 居中对齐
              textAlign: TextAlign.center,
              /// 用来设置文字绘制方向的
              textDirection: TextDirection.ltr,
              /// 自动获取焦点
             // autofocus: true,
              /// 密码
              ///obscureText: true,
              /// 当输入框内的文字发生改变时回调的函数
              onChanged: (value){
                print("回调了 $value");
              },

              /// 设置文字样式
              style: TextStyle(
                /// 设置文字大小
                fontSize: 16.0,
                /// 颜色
                color: Colors.deepPurple,
                /// 设置Text的线
                decoration: TextDecoration.none,
                ///
              ),
            )
          ),
        ),
        SizedBox(height: 10,),
        Text("icon 显示在输入框的前面,用法"),
        TextField(
          decoration: InputDecoration(
            icon:Icon(Icons.person)
          ),
        ),
         SizedBox(height: 10,),
        Text("label Text 显示在输入框上边，当获取焦点labelText往上移动一点"),
        TextField(
          decoration: InputDecoration(
            labelText: '姓名',
            labelStyle: TextStyle(color: Colors.red)
          ),
        ),
        SizedBox(height: 10,),
        Text("helpText 显示在输入框的左下，用来提示用户"),
        TextField(
          decoration: InputDecoration(
            hintText: "请输入用户名",
            helperText: '用户名长度为6-10个字母',
            helperStyle: TextStyle(color: Colors.blue),
            helperMaxLines: 1
          ),
        ),
        SizedBox(height: 10,),
        Text("errorText显示输入框左下 默认字体为红色"),
        TextField(
          decoration: InputDecoration(
            errorText: "用户名错误",
            helperText: '用户名长度为6-10个字母',
            errorStyle: TextStyle(fontSize: 12),
            errorMaxLines: 1,
            errorBorder: OutlineInputBorder(borderSide: BorderSide(color: Colors.red))
          ),
        ),
        SizedBox(height: 10,),
        Text("prefix组件是输入框前面的部分"),
        TextField(
          decoration: InputDecoration(
            prefixIcon: Icon(Icons.person)
          ),
        ),
        SizedBox(height: 10,),
        Text("suffix组件是输入框后面的部分"),
        TextField(
          decoration: InputDecoration(
            suffixIcon: Icon(Icons.person)
          ),
        ),
        SizedBox(height: 10,),
        Text("count 组件统计输入框文字个数"),
        TextField(
         onChanged: (value){
           setState(() {
             _textFieldValue = value;
           });
         },
         decoration: InputDecoration(
           counterText: '${_textFieldValue.length}/32'
         ),
        ),
        SizedBox(height: 10,),
        Text("仿qq登录输入框"),
        Container(
          height: 60,
          width: 250,
          child: TextField(
            decoration: InputDecoration(
              fillColor: Color(0x30cccccc),
              filled: true,
              enabledBorder: OutlineInputBorder(
                borderSide: BorderSide(
                  color: Color(0x00ff0000)
                ),
                borderRadius: BorderRadius.all(Radius.circular(100)),
              ),
              hintText: "qq号/手机号/邮箱",
              focusedBorder: OutlineInputBorder(
                borderSide: BorderSide(color: Color(0x00000000)),
                borderRadius: BorderRadius.all(Radius.circular(1000))
              )
            ),
          ),
        ),
        SizedBox(height: 10,),
        Text("密码输入框,只需obscureText属性设置true"),
        TextField(
          obscureText: true,
        ),
        SizedBox(height: 10,),
        Text("onChanged 是内容发生变化时回调"),
        Text("onSumitted时点击回车或者点击软键盘上完成回调"),
        Text("onTap点输入框时回调"),
        TextField(
          onChanged: (value) {
           print('onChanged:$value'); 
          },
          onSubmitted: (value){
            print("onSubitted:$value");
          },
          onTap: (){
            print("onTap");
          },
        ),
        
      ],
      ),
    );
  }
}
